import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';
import { RootState } from '../../app/store';
import { Order, Active} from "../../myTypes"

interface Filter { 
  visible: boolean
  active: Active
  order: Order
  minPrice: string
  maxPrice: string
  theme: string
} 
  
// 保存在redux中的数据类型
const initialState: Filter = {
  visible: false,
  active: "complex",
  order: "asc",
  minPrice: '',
  maxPrice: '',
  theme: ''
};

export const aroundSlice = createSlice({
  name: 'around',
  initialState,
  reducers: {
    // 将visible设置为false
    setVisibleToFalse: ((state, action: PayloadAction<boolean>) => { 
      state.visible = action.payload
    }),
    // 将visible设置为true
    setVisibleToTrue: ((state, action: PayloadAction<boolean>) => { 
      state.visible = action.payload
    }),
    //切换active的值
    toggleActive: ((state, action: PayloadAction<Active>) => { 
      state.active = action.payload
    }),
    // 切换order的值
    toggleOrder: ((state, action: PayloadAction<Order>) => { 
      state.order = action.payload
    }),
    // 设置最低价格
    setMinPrice:((state, action: PayloadAction<string>) => { 
      state.minPrice = action.payload
    }),
    // 设置最高价格
    setMaxPrice:((state, action: PayloadAction<string>) => { 
      state.maxPrice = action.payload
    }),
    // 设置theme的值
    setTheme:((state, action: PayloadAction<string>) => { 
      state.theme = action.payload
    }),
  }
});

// 暴露方法
export const { setVisibleToFalse, setVisibleToTrue, toggleActive, toggleOrder,setMaxPrice,setMinPrice,setTheme } = aroundSlice.actions

// 将数据暴露出去
export const visible = (state: RootState) => state.around.visible;
export const active = (state: RootState) => state.around.active;
export const order = (state: RootState) => state.around.order;
export const minPrice = (state: RootState) => state.around.minPrice;
export const maxPrice = (state: RootState) => state.around.maxPrice;
export const theme = (state: RootState) => state.around.theme;


// 暴露bannerRReducer用于在store中进行注册
export default aroundSlice.reducer;